<template>
	<div class="resident-management">
		<el-card>
			<!-- 筛选栏 -->
			<el-form :inline="true" :model="filterForm" class="filter-form">
				<el-row>
					<el-col :span="6">
						<el-form-item label="签约状态">
							<el-select v-model="filterForm.signStatus" placeholder="请选择">
								<el-option label="全部" value=""></el-option>
								<el-option label="签约中" value="签约中"></el-option>
								<el-option label="已解约" value="已解约"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="签约机构">
							<el-select v-model="filterForm.org" placeholder="请选择">
								<el-option label="机构A" value="orgA"></el-option>
								<el-option label="机构B" value="orgB"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="医生团队">
							<el-select v-model="filterForm.team" placeholder="请选择">
								<el-option label="团队1" value="team1"></el-option>
								<el-option label="团队2" value="team2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<!-- 操作按钮 -->
						<div class="operation-btns">
							<el-button type="primary" @click="addResident()">新增居民档案</el-button>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="服务包">
							<el-select v-model="filterForm.servicePackage" placeholder="请选择">
								<el-option label="基础包" value="basic"></el-option>
								<el-option label="高级包" value="advanced"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="居民标签">
							<el-select v-model="filterForm.tag" placeholder="请选择">
								<el-option label="高血压" value="高血压"></el-option>
								<el-option label="冠心病" value="冠心病"></el-option>
								<el-option label="高血糖" value="高血糖"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="居民姓名">
							<el-input v-model="filterForm.keyword" placeholder="请输入关键字" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>



			<!-- 居民列表 -->
			<el-table :data="filteredResidents" border stripe>
				<el-table-column prop="id" label="编号" width="100px" align="center"></el-table-column>
				<el-table-column prop="name" label="姓名" width="70px" align="center"></el-table-column>
				<el-table-column prop="idCard" label="身份证号" width="170px" align="center"></el-table-column>
				<el-table-column prop="phone" label="手机号码" width="120px" align="center"></el-table-column>
				<el-table-column prop="signStatus" label="签约状态" width="80px" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.signStatus === '签约中'">签约中</el-tag>
						<el-tag type="danger" v-else>已解约</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="用户标签" width="220px" align="center">
					<template slot-scope="scope">
						<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">
							{{ tag }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="居民状态" width="150px" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" active-text="启用" inactive-text="停用"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="viewDetail(scope.row)">查看详情</el-button>
						<el-button type="text" @click="editResident(scope.row)">编辑</el-button>
						<el-button type="text" @click="sendMsg(scope.row)">发消息</el-button>
						<el-button type="text" @click="addService(scope.row)">添加服务</el-button>
						<el-button type="text" @click="deleteResident(scope.row)" style="color: red;">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'ResidentManagement',
		data() {
			return {
				// 筛选表单数据
				filterForm: {
					signStatus: '',
					org: '',
					team: '',
					servicePackage: '',
					tag: '',
					keyword: ''
				},
				// 原始居民数据（实际开发从接口获取）
				residents: [{
						id: '2021340001',
						name: '王安然',
						avatar: 'https://example.com/avatar.jpg', // 实际头像地址
						idCard: '371456198908090543',
						phone: '188641368888',
						signStatus: '签约中',
						tags: ['高血压', '冠心病', '高血糖'],
						status: true
					},
					{
						id: '2021340001',
						name: '王安然',
						avatar: 'https://example.com/avatar.jpg',
						idCard: '371456198908090543',
						phone: '188641368888',
						signStatus: '签约中',
						tags: ['高血压', '冠心病', '高血糖'],
						status: true
					},
					// 可继续添加更多模拟数据...
				],
				// 筛选后的居民列表
				filteredResidents: []
			};
		},
		mounted() {
			// 初始化时展示全部数据
			this.filteredResidents = [...this.residents];
		},
		methods: {
			// 搜索（筛选）逻辑
			handleSearch() {
				const {
					signStatus,
					org,
					team,
					servicePackage,
					tag,
					keyword
				} = this.filterForm;
				this.filteredResidents = this.residents.filter((item) => {
					// 签约状态匹配
					const signStatusMatch = !signStatus || item.signStatus === signStatus;
					// 机构匹配
					const orgMatch = !org || item.org === org; // 若数据有org字段，需补充
					// 医生团队匹配
					const teamMatch = !team || item.team === team; // 若数据有team字段，需补充
					// 服务包匹配
					const servicePackageMatch = !servicePackage || item.servicePackage ===
						servicePackage; // 若数据有servicePackage字段，需补充
					// 标签匹配
					const tagMatch = !tag || item.tags.includes(tag);
					// 关键字匹配（姓名、身份证、手机号）
					const keywordMatch = !keyword ||
						item.name.includes(keyword) ||
						item.idCard.includes(keyword) ||
						item.phone.includes(keyword);
					return signStatusMatch && orgMatch && teamMatch && servicePackageMatch && tagMatch &&
						keywordMatch;
				});
			},
			// 新增居民档案
			addResident() {
				// 可弹框或跳转页面，这里仅示例
				this.$router.push("/addUser")
			},
			// 导出数据
			exportData() {
				this.$message.info('导出数据逻辑待实现');
			},
			// 查看详情
			viewDetail(row) {
				this.$message.info(`查看 ${row.name} 的详情`);
				// 实际可跳转详情页或弹层展示
			},
			// 编辑居民
			editResident(row) {
				this.$message.info(`编辑 ${row.name} 的信息`);
				// 实际可弹框编辑
			},
			// 发消息
			sendMsg(row) {
				this.$message.info(`给 ${row.name} 发消息`);
			},
			// 添加服务
			addService(row) {
				this.$message.info(`给 ${row.name} 添加服务`);
			},
			// 删除居民
			deleteResident(row) {
				this.$confirm('确定删除该居民吗？', '提示', {
					type: 'warning'
				}).then(() => {
					// 实际调用接口删除，这里模拟从列表移除
					this.filteredResidents = this.filteredResidents.filter((item) => item.id !== row.id);
					this.$message.success('删除成功');
				}).catch(() => {
					this.$message.info('已取消删除');
				});
			},
			// 根据标签获取Tag类型（用于渲染不同颜色）
			getTagType(tag) {
				if (tag === '高血压') return 'danger';
				if (tag === '冠心病') return 'info';
				if (tag === '高血糖') return 'warning';
				return '';
			}
		}
	};
</script>

<style scoped>
	.resident-management {
		padding: 20px;
	}

	.filter-form {
		margin-bottom: 20px;
	}

	.operation-btns {
		margin-bottom: 20px;
	}

	.operation-btns .el-button {
		margin-right: 10px;
	}
</style>